<template>
  <div class="flight-container">
    <el-button
      style="position: absolute; top: 2%; left: 5%"
      type="info"
      @click="
        visible2 = true;
        getIdlePlane();
      "
      >添加航班</el-button
    >

    <el-table
      :data="tableData"
      style="width: 99.8%; position: absolute; right: 0; margin-top: 5%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column label="航班编号" prop="flightId" width="100">
      </el-table-column>
      <el-table-column label="起飞时间" prop="takeOffDate" width="160">
      </el-table-column>
      <el-table-column prop="arriveDate" label="抵达时间" width="160">
      </el-table-column>
      <el-table-column prop="takeOffAerodrome" label="起飞机场" width="100">
      </el-table-column>
      <el-table-column prop="arriveAerodrome" label="抵达机场" width="100">
      </el-table-column>
      <el-table-column prop="economyPrice" label="经济舱价格" width="100">
      </el-table-column>
      <el-table-column prop="businessPrice" label="商务舱价格" width="100">
      </el-table-column>
      <el-table-column>
        <template slot-scope="scope">
          <el-tag size="medium" style="position: absolute; left: 70%; top: 19%" v-if="scope.row.arrived === 1" type="success">已抵达</el-tag>
          <el-tag size="medium" style="position: absolute; left: 70%; top: 19%" v-if="scope.row.arrived === 0" type="warning">未抵达</el-tag>
          <el-button
            size="mini"
            type="info"
            @click="
              visible3 = true;
              getIdlePlane();
              getFlight(scope.$index, scope.row);
            "
            style="position: absolute; left: 25%; top: 19%"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="deleteFlight(scope.$index, scope.row)"
            style="position: absolute; left: 45%; top: 19%"
            >删除</el-button
          >
          <el-button
            size="mini"
            type="success"
            @click="
              currentFlightId = scope.row.flightId;
              getFlightPassengers(scope.$index, scope.row), (visible = true);
            "
            style="position: absolute; left: -5%; top: 19%"
            >管理乘客</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="管理乘客" :visible.sync="visible">
      <el-table :data="passengers">
        <el-table-column
          property="passengerId"
          label="身份证信息"
          width="200"
        ></el-table-column>
        <el-table-column
          property="name"
          label="姓名"
          width="100"
        ></el-table-column>
        <el-table-column
          property="sex"
          label="性别"
          width="50"
        ></el-table-column>
        <el-table-column
          property="phone"
          label="电话"
          width="150"
        ></el-table-column>
        <el-table-column>
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="danger"
              @click="deleteIndentByPassengerId(scope.$index, scope.row)"
              style="position: absolute; left: 50%; top: 19%"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>

    <el-dialog title="添加航班" :visible.sync="visible2">
      <el-form
        ref="form"
        :model="flightMessage"
        label-width="80px"
        :rules="rules"
      >
        <el-form-item label="航班编号" prop="flightId">
          <el-input
            v-model="flightMessage.flightId"
            :validate-event="flightMessage.flightId == '' ? false : true"
          ></el-input>
        </el-form-item>
        <el-form-item label="起飞机场" prop="takeOffAerodrome">
          <el-input
            v-model="flightMessage.takeOffAerodrome"
            :validate-event="
              flightMessage.takeOffAerodrome == '' ? false : true
            "
          ></el-input>
        </el-form-item>
        <el-form-item label="抵达机场" prop="arriveAerodrome">
          <el-input
            v-model="flightMessage.arriveAerodrome"
            :validate-event="flightMessage.arriveAerodrome == '' ? false : true"
          ></el-input>
        </el-form-item>
        <el-form-item label="起飞时间" prop="takeOffDate">
          <el-date-picker
            v-model="flightMessage.takeOffDate"
            type="datetime"
            placeholder="选择日期时间"
            :validate-event="flightMessage.takeOffDate == '' ? false : true"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="抵达时间" prop="arriveDate">
          <el-date-picker
            v-model="flightMessage.arriveDate"
            type="datetime"
            placeholder="选择日期时间"
            :validate-event="flightMessage.arriveDate == '' ? false : true"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label-width="90px" label="经济舱价格" prop="economyPrice">
          <el-input
            v-model="flightMessage.economyPrice"
            :validate-event="flightMessage.economyPrice == '' ? false : true"
          ></el-input>
        </el-form-item>
        <el-form-item
          label-width="90px"
          label="商务舱价格"
          prop="businessPrice"
        >
          <el-input
            v-model="flightMessage.businessPrice"
            :validate-event="flightMessage.businessPrice == '' ? false : true"
          ></el-input>
        </el-form-item>
        <el-form-item label-width="90px" label="航班客机" prop="planeId">
          <el-select
            v-model="planeId"
            placeholder="请选择"
            :validate-event="planeId == '' ? false : true"
          >
            <el-option
              v-for="item in planes"
              :key="item.value"
              :label="item.planeId"
              :value="item.planeId"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label-width="90px" label="登机口" prop="gate">
          <el-input
            v-model="flightMessage.gate"
            :validate-event="flightMessage.gate == '' ? false : true"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="addFlight('form')"
            >立即创建</el-button
          >
          <el-button @click="visible2 = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <el-dialog :title="'编辑航班 ' + flight.flightId" :visible.sync="visible3">
      <el-form ref="form" :model="flight" label-width="80px" :rules="rules2">
        <el-form-item label="起飞机场" prop="takeOffAerodrome">
          <el-input v-model="flight.takeOffAerodrome" :validate-event="flight.takeOffAerodrome == '' ? false : true"></el-input>
        </el-form-item>
        <el-form-item label="抵达机场" prop="arriveAerodrome">
          <el-input v-model="flight.arriveAerodrome" :validate-event="flight.arriveAerodrome == '' ? false : true"></el-input>
        </el-form-item>
        <el-form-item label="起飞时间" prop="takeOffDate">
          <el-date-picker
            v-model="flight.takeOffDate"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择日期时间"
            :validate-event="flight.takeOffDate == '' ? false : true"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="抵达时间" prop="arriveDate">
          <el-date-picker
            v-model="flight.arriveDate"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择日期时间"
            :validate-event="flight.arriveDate == '' ? false : true"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label-width="90px" label="经济舱价格" prop="economyPrice">
          <el-input v-model="flight.economyPrice" :validate-event="flight.economyPrice == '' ? false : true"></el-input>
        </el-form-item>
        <el-form-item
          label-width="90px"
          label="商务舱价格"
          prop="businessPrice"
        >
          <el-input v-model="flight.businessPrice" :validate-event="flight.businessPrice == '' ? false : true"></el-input>
        </el-form-item>
        <el-form-item label-width="90px" label="航班客机" prop="planeId">
          <el-select v-model="flight.planeId" placeholder="请选择">
            <el-option
              v-for="item in planes"
              :key="item.value"
              :label="item.planeId"
              :value="item.planeId"
              :validate-event="flight.planeId == '' ? false : true"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="modifyFlight('form')"
            >确认修改</el-button
          >
          <el-button @click="visible3 = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <el-pagination
      layout="prev, pager, next"
      :total="total"
      :page-size="pageSize"
      :current-page.sync="currentPage"
      @current-change="nextPage"
      style="position: absolute; bottom: 10%; left: 32%"
    >
    </el-pagination>
  </div>
</template>

<script>
import {
  getFlightPage,
  addFlight,
  deleteFlight,
  getFlightPassengers,
  deleteIndentByPassengerId,
  getFlight,
  modifyFlight,
  getIdlePlane,
} from "../api/flight";
import { Message } from "element-ui";
// import func from 'vue-editor-bridge';

export default {
  name: "Flight",
  data() {
    var validQC = (rule, value, callback) => {
      if (value) {
        if (/[\u4E00-\u9FA5]/g.test(value) || /^\d{1,}$/.test(value)) {
          callback(new Error("请输入正确的航班编号（数字与字母）"));
        } else {
          // 验证通过
          callback();
        }
        callback();
      } else {
        callback(new Error("请输入航班编号"));
      }
    };
    return {
      visible: false,
      visible2: false,
      visible3: false,
      total: 0,
      pageSize: 6,
      currentPage: 1,
      currentFlightId: "",
      planeId: "",
      planes: [],
      flight: {},
      flightMessage: {
        flightId: "",
        takeOffDate: "",
        arriveDate: "",
        takeOffAerodrome: "",
        arriveAerodrome: "",
        economyPrice: "",
        businessPrice: "",
        gate: "",
      },
      rules: {
        flightId: [{ required: true, trigger: "blur", validator: validQC }],
        takeOffAerodrome: [
          { required: true, message: "请输入起飞机场", trigger: "blur" },
        ],
        arriveAerodrome: [
          { required: true, message: "请输入抵达机场", trigger: "blur" },
        ],
        takeOffDate: [
          { required: true, message: "请选择起飞时间", trigger: "blur" },
        ],
        arriveDate: [
          { required: true, message: "请选择抵达时间", trigger: "blur" },
        ],
        economyPrice: [
          { required: true, message: "请输入经济舱价格", trigger: "blur" },
        ],
        businessPrice: [
          { required: true, message: "请输入商务舱价格", trigger: "blur" },
        ],
        // planeId: [
        //   { required: true, message: '请选择航班客机', trigger: 'blur' }
        // ],
        gate: [{ required: true, message: "请输入登机口", trigger: "blur" }],
      },
      rules2: {
        takeOffAerodrome: [
          { required: true, message: "请输入起飞机场", trigger: "blur" },
        ],
        arriveAerodrome: [
          { required: true, message: "请输入抵达机场", trigger: "blur" },
        ],
        takeOffDate: [
          { required: true, message: "请选择起飞时间", trigger: "blur" },
        ],
        arriveDate: [
          { required: true, message: "请选择抵达时间", trigger: "blur" },
        ],
        economyPrice: [
          { required: true, message: "请输入经济舱价格", trigger: "blur" },
        ],
        businessPrice: [
          { required: true, message: "请输入商务舱价格", trigger: "blur" },
        ],
        // planeId: [
        //   { required: true, message: '请选择航班客机', trigger: 'blur' }
        // ],
      },
      tableData: [],
      passengers: [],
    };
  },

  methods: {
    handleSelectionChange(val) {
      console.log(val);
    },
    handleDelete() {},

    getIdlePlane() {
      const _this = this;
      getIdlePlane({}).then(function (response) {
        _this.planes = response.data.obj;
        console.log(_this.planes)
      });
    },

    addFlight(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const _this = this;
          addFlight({
            flightMessage: this.flightMessage,
            gate: this.flightMessage.gate,
            planeId: this.planeId,
          }).then((response) => {
            Message({
              message: response.data.message,
              type: "success",
              duration: 2 * 1000,
            });
            getFlightPage({
              pageNum: _this.currentPage,
              pageSize: _this.pageSize,
            }).then(function (response) {
              _this.total = response.data.obj.total;
              _this.tableData = response.data.obj.flightList;
            });
            _this.visible2 = false;
          });
        } else {
          console.log("error submit!!");
        }
      });
    },

    deleteFlight(index, flight) {
      const _this = this;
      this.$confirm("是否删除航班" + flight.flightId + "?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          deleteFlight({
            flightId: flight.flightId,
          }).then(function (response) {
            Message({
              message: response.data.message,
              type: "success",
              duration: 2 * 1000,
            });
            getFlightPage({
              pageNum: _this.currentPage,
              pageSize: _this.pageSize,
            }).then(function (response) {
              _this.total = response.data.obj.total;
              _this.tableData = response.data.obj.flightList;
            });
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    getFlightPassengers(index, flight) {
      const _this = this;
      getFlightPassengers({
        flightId: flight.flightId,
      }).then(function (response) {
        _this.passengers = response.data.obj;
      });
    },

    deleteIndentByPassengerId(index, passenger) {
      const _this = this;
      this.$confirm(
        "是否删除该乘客" +
          passenger.name +
          "：" +
          passenger.passengerId +
          "的订单?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          deleteIndentByPassengerId({
            passengerId: passenger.passengerId,
          }).then(function (response) {
            Message({
              message: response.data.message,
              type: "success",
              duration: 2 * 1000,
            });
            getFlightPassengers({
              flightId: _this.currentFlightId,
            }).then(function (response) {
              _this.passengers = response.data.obj;
            });
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    getFlight(index, flight) {
      const _this = this;
      getFlight({
        flightId: flight.flightId,
      }).then(function (response) {
        _this.flight = response.data.obj;
      });
    },

    modifyFlight(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const _this = this;
          console.log(this.flight);
          modifyFlight({
            flightId: this.flight.flightId,
            planeId: this.flight.planeId,
            economyPrice: this.flight.economyPrice,
            businessPrice: this.flight.businessPrice,
            takeOffAerodrome: this.flight.takeOffAerodrome,
            arriveAerodrome: this.flight.arriveAerodrome,
            takeOffDate: this.flight.takeOffDate,
            arriveDate: this.flight.arriveDate,
          }).then(function (response) {
            Message({
              message: response.data.message,
              type: "success",
              duration: 2 * 1000,
            });
            getFlightPage({
              pageNum: _this.currentPage,
              pageSize: _this.pageSize,
            }).then(function (response) {
              _this.total = response.data.obj.total;
              _this.tableData = response.data.obj.flightList;
            });
            _this.visible3 = false;
          });
        } else {
          console.log("error submit!!");
        }
      });
    },

    nextPage() {
      const _this = this;
      getFlightPage({
        pageNum: this.currentPage,
        pageSize: this.pageSize,
      }).then(function (response) {
        _this.total = response.data.obj.total;
        _this.tableData = response.data.obj.flightList;
      });
    },
  },

  created() {
    const _this = this;
    getFlightPage({
      pageNum: 1,
      pageSize: this.pageSize,
    }).then(function (response) {
      _this.total = response.data.obj.total;
      _this.tableData = response.data.obj.flightList;
    });
  },
};
</script>

<style>
* {
  padding: 0;
  margin: 0;
}
</style>
